<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,0.3);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="mask">
        <div>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus ad amet asperiores beatae
                consequuntur eos error esse fugiat illo ipsum laboriosam libero maiores molestiae neque nulla, sed
                veniam voluptas!
            </div>
            <div>Alias aspernatur assumenda autem debitis dolor eos id laboriosam maiores natus omnis quisquam
                repellendus, vitae voluptatibus! Commodi dolorem doloremque ex illo libero minus nobis obcaecati,
                repellat ullam voluptas voluptate voluptates.
            </div>
            <div>Assumenda, dolores doloribus ea hic iusto quaerat saepe sit. Accusamus asperiores corporis cumque
                cupiditate dolores ea enim, esse fugiat, fugit libero magnam necessitatibus porro quam, rem similique
                sit sunt tempore.
            </div>
            <div>Atque beatae delectus deleniti dolor doloremque doloribus dolorum ipsam magnam nam non ratione, sit
                tenetur vero voluptatem voluptates. Dignissimos ducimus eaque labore qui repellat? Deleniti dolorum ea
                eveniet qui voluptate?
            </div>
            <div>Aliquid corporis deserunt dolore eaque exercitationem fugiat id, odio reiciendis repellat repudiandae
                sed totam unde vitae? Accusamus animi, aspernatur beatae ipsa molestiae nesciunt non nostrum omnis? Ab
                adipisci facilis quia?
            </div>
            <div>A adipisci asperiores beatae consequatur dolorum ea exercitationem expedita illo iusto, nesciunt odit
                officia pariatur possimus quaerat sed sunt totam velit, vitae voluptate voluptates! A animi autem
                quibusdam tenetur ullam.
            </div>
            <div>Enim minus, modi natus ut voluptate voluptatibus! Accusamus adipisci beatae, consequatur corporis
                deleniti est impedit maxime minima nisi nostrum nulla pariatur, quaerat quasi quidem repudiandae, rerum
                sapiente suscipit unde voluptates.
            </div>
            <div>Accusantium ad alias at corporis cumque dicta dolorem ea enim eum, fuga fugiat incidunt magni nemo
                neque nobis nulla, officiis omnis quasi ratione sunt unde ut vel voluptate voluptates voluptatum?
            </div>
            <div>Ad, aliquam amet architecto aspernatur, blanditiis delectus deserunt eos et illo impedit ipsam itaque
                nihil non odio officiis, omnis quasi quos vitae voluptate voluptates! Alias cumque doloribus facere
                illum nam?
            </div>
            <div>Deleniti dolor mollitia nostrum officia provident quae quidem quod recusandae soluta tempore. Ab
                architecto, autem delectus id ipsam molestiae molestias nisi officiis quibusdam ratione soluta suscipit
                unde veritatis vero voluptate.
            </div>
            <div>Architecto aspernatur maxime nisi rerum? Aliquam animi, aperiam beatae cumque doloribus enim et
                expedita harum, illum impedit incidunt, inventore molestiae necessitatibus quia rem saepe temporibus
                unde ut? Consequatur corporis, maiores?
            </div>
            <div>Accusantium, aliquam amet culpa dignissimos error harum molestiae odit, omnis quod repudiandae sapiente
                sequi, tempora unde. Consequuntur cupiditate doloremque optio tempore ullam velit. Incidunt ipsam modi
                nobis odit quod reprehenderit.
            </div>
            <div>A amet asperiores beatae culpa delectus dignissimos doloremque ducimus eos error est ex exercitationem
                explicabo id inventore ipsa ipsum iusto, maxime natus nesciunt non quidem quisquam recusandae similique
                voluptas voluptate.
            </div>
            <div>Dolore fugit neque nobis vero voluptatibus. Aliquid atque consectetur cum delectus deleniti deserunt
                ducimus earum enim excepturi, illo ipsa laborum praesentium quo unde vel veritatis voluptates! Ad dicta
                molestiae ratione.
            </div>
            <div>Aut debitis expedita minima non nostrum quia saepe suscipit voluptatibus? Debitis error et ex fugiat
                illo impedit, iste iusto labore laudantium, magni molestias nisi officiis qui quod recusandae unde vel.
            </div>
            <div>Accusamus aspernatur autem beatae, consectetur cupiditate debitis ea, error esse et eum excepturi fuga
                fugit ipsum iure magni minus molestiae nam odio quam repellendus soluta totam voluptates voluptatibus!
                Quam, qui.
            </div>
            <div>Ab accusantium adipisci aperiam asperiores aut blanditiis consectetur debitis deserunt dolorum ea, eius
                enim excepturi id illum itaque mollitia nihil provident quae quis saepe sequi sunt ullam vitae? Ducimus,
                molestias?
            </div>
            <div>Aliquam at, atque commodi corporis dolorum ducimus eius eligendi eveniet illum labore nostrum nulla,
                odio, odit? Consectetur earum harum molestias natus obcaecati omnis repellat temporibus? Consequatur
                deserunt eos fuga sunt.
            </div>
            <div>Eos error tempora tenetur! Consectetur cupiditate dicta iusto modi, perspiciatis sapiente voluptatibus.
                Ab aperiam, assumenda consectetur dolorem dolores, doloribus esse iste itaque maxime, molestiae
                perferendis praesentium rem repellat vel voluptates.
            </div>
            <div>Consequuntur eligendi eveniet fugit tenetur ut, voluptate? Aliquid aspernatur consequatur eveniet
                expedita ipsum mollitia pariatur praesentium sunt velit! Amet assumenda corporis excepturi maiores
                molestiae porro provident quaerat sint suscipit voluptatibus.
            </div>
            <div>Ad assumenda at, beatae corporis deleniti dolore eligendi, est ex facere fuga itaque natus obcaecati
                officia pariatur quibusdam recusandae reprehenderit repudiandae sed? Ad doloremque fugit labore
                perspiciatis, placeat quaerat sit.
            </div>
            <div>Accusamus cum dolor, facere labore minima minus molestias nihil non praesentium quod sit velit. Amet
                molestiae nulla quaerat quasi voluptatibus. Asperiores assumenda facere non quasi ratione sequi,
                tenetur? Adipisci, dolorem!
            </div>
            <div>Aliquid assumenda consequatur est itaque labore libero optio quas, voluptate. Aliquam dolorem quasi
                sunt tempore vitae, voluptatibus. Ab eaque hic laboriosam laborum necessitatibus numquam odit quas quo
                velit voluptates. Neque?
            </div>
            <div>Aspernatur assumenda beatae consectetur eligendi esse exercitationem facere, ipsa maiores minima nam
                nostrum, numquam odio optio quam quas, rem sed sint tenetur! Aut commodi deserunt doloremque earum modi
                pariatur recusandae.
            </div>
            <div>Autem delectus dignissimos esse, labore libero suscipit ullam voluptatum. Aliquid aspernatur, atque
                beatae consequuntur distinctio dolorum eius est, id modi nesciunt nihil, omnis praesentium quaerat
                recusandae reiciendis reprehenderit similique velit?
            </div>
            <div>Aliquid aspernatur dolorum et modi nihil, non porro similique! Culpa distinctio dolor ducimus ea eaque
                eos esse eum facere, facilis magnam minima nobis nostrum quia quis, repudiandae unde voluptates.
                Veritatis.
            </div>
            <div>A, blanditiis, placeat. Accusamus dignissimos doloremque dolorum eligendi laborum laudantium officiis,
                qui vero voluptatum! Asperiores autem beatae, dicta dolor dolorum esse est facilis fugiat id in optio
                quibusdam totam veritatis!
            </div>
            <div>Ab, dignissimos, minima! Atque autem cum distinctio ipsa nihil perferendis perspiciatis placeat rerum
                tempore, voluptatem? Amet architecto deserunt esse fuga hic in incidunt ipsa, maxime necessitatibus
                possimus unde, vero voluptatem.
            </div>
            <div>A ab, ad animi assumenda commodi, deserunt doloremque eos hic in natus necessitatibus nemo odio
                repudiandae totam ullam? Corporis, quod, voluptatum. Ducimus fugit itaque repellendus ut vero? Deserunt
                dolor, officiis!
            </div>
            <div>Dolore doloribus nisi pariatur quidem? Amet aperiam asperiores consectetur consequatur cupiditate earum
                eos, facere illum impedit mollitia nobis officiis pariatur perferendis provident quae sunt suscipit
                totam ut veritatis voluptate voluptates.
            </div>
            <div>Ab asperiores aspernatur, atque culpa illo incidunt minima nam qui saepe ut. Asperiores, aspernatur
                beatae cum cumque dicta dolore dolorum esse exercitationem facilis fugit harum, laborum, neque quaerat
                quasi vero.
            </div>
            <div>Aliquam aspernatur consectetur praesentium vero voluptates! A atque deleniti, dolore eius facere id in
                ipsum laboriosam molestias nihil obcaecati officiis optio provident, quam quas, qui quia similique sit
                ullam voluptas?
            </div>
            <div>Aliquid, debitis delectus et facilis id, itaque, laborum molestiae numquam pariatur qui quisquam
                similique sint voluptatum. Accusantium dicta doloremque eaque iusto molestias mollitia odit quam qui
                sint velit! Eum, temporibus.
            </div>
            <div>Aliquid consequatur dolore error fugiat itaque minus mollitia neque odit optio quae. Consectetur ex
                facere libero maiores qui quis quo quos sed soluta temporibus? Dignissimos ducimus eveniet repellendus
                tempore totam.
            </div>
            <div>Doloribus dolorum ex explicabo incidunt laboriosam, libero maiores neque. Corporis cum earum esse,
                facere itaque, iusto libero maiores neque non odio odit omnis possimus recusandae rem similique sint
                ullam veritatis.
            </div>
            <div>Adipisci aliquam animi aut commodi consectetur culpa dignissimos dolores eos error exercitationem fugit
                illo impedit magnam magni minima molestiae molestias, nobis optio quaerat, quam qui sapiente vel
                voluptas voluptatem voluptatum.
            </div>
            <div>Ab atque blanditiis cum distinctio dolor ea est excepturi fugiat id illum impedit inventore ipsum
                itaque nisi non obcaecati officia optio perspiciatis quia, quibusdam quos rem repellat ullam.
                Consequatur, quod.
            </div>
            <div>Corporis debitis distinctio dolore ex, facilis incidunt modi natus necessitatibus possimus ratione
                repellat ut vero. Consequuntur ea illo laudantium, molestiae nihil nulla omnis quasi rem rerum tempora,
                ullam vel vitae.
            </div>
            <div>A, aliquid asperiores atque consequatur debitis deserunt distinctio ea enim esse et facere, fugit
                incidunt magnam nesciunt, nobis non nostrum omnis perferendis porro possimus quidem recusandae sed sit
                voluptas voluptate.
            </div>
            <div>Accusamus accusantium, aliquid at cumque deleniti earum eligendi et facere facilis iure libero mollitia
                nihil nisi nobis, nostrum pariatur possimus praesentium qui quia reiciendis repudiandae similique sint
                sit tenetur voluptatem.
            </div>
            <div>Architecto asperiores consectetur cum, dolor excepturi exercitationem illum inventore maiores nostrum
                odit saepe sint soluta, tempore temporibus unde vel voluptate, voluptates? Cupiditate et, fugit impedit
                iusto quam sequi sunt vel?
            </div>
            <div>Adipisci commodi dolores iure laborum porro? Accusamus aliquam asperiores corporis dignissimos ex
                explicabo fuga incidunt ipsa mollitia obcaecati possimus, quam saepe sequi sint soluta. Accusamus
                architecto earum nemo quidem velit.
            </div>
            <div>Adipisci, animi asperiores commodi delectus dolorum illum in laborum magnam mollitia nisi optio quaerat
                quisquam quos, recusandae sint soluta tenetur, voluptates? Accusantium atque harum laboriosam magnam
                molestias neque odio, quae.
            </div>
            <div>Atque commodi eaque enim, error, hic inventore ipsa modi necessitatibus omnis, praesentium quidem
                similique voluptas. Accusamus animi, at enim eos illo illum inventore ipsa ipsam neque nesciunt
                repellendus, unde voluptate.
            </div>
            <div>Beatae blanditiis commodi delectus distinctio incidunt ipsa praesentium quae quam quisquam sint. Fuga
                ipsam itaque laudantium obcaecati quam. Assumenda natus neque repellat tenetur voluptatibus. Consequatur
                deserunt exercitationem illum quia quo.
            </div>
            <div>At consectetur consequatur cumque dolor, ex fuga in iusto labore, laboriosam molestias nemo nulla
                numquam odio perferendis quia quos repudiandae, sint velit! Ab atque, delectus eligendi et laudantium
                possimus temporibus.
            </div>
            <div>Assumenda autem commodi dolor eum explicabo laboriosam laborum modi sit, suscipit! Amet cum dignissimos
                doloribus ducimus eius eos impedit magnam, neque nihil, nulla, numquam officia quasi quisquam similique
                suscipit veniam.
            </div>
            <div>Aliquam, corporis enim eveniet ex neque quibusdam sequi sunt vel veniam! Aspernatur delectus ducimus
                eius ex facilis iste laudantium maxime neque nulla quam ratione rem rerum sapiente soluta veritatis,
                voluptas?
            </div>
            <div>Accusantium animi debitis delectus dicta illo maiores nisi ullam voluptas. Ad architecto aut eveniet,
                ex harum id, illo libero officia repellat sit velit voluptas? Blanditiis cupiditate dicta nemo pariatur
                rerum.
            </div>
            <div>Asperiores corporis deserunt ducimus ex in ipsa laboriosam magnam nam non porro, possimus repellendus
                sed tenetur voluptas voluptatem! Architecto beatae consectetur deserunt ex facilis magni nulla quos
                sapiente tempora voluptatem.
            </div>
        </div>
    </div>
</body>
</html>